<template>
  <view class="more-recommended-page">
    <!-- 筛选条件 -->
    <view class="filter-section">
      <view class="filter-tabs">
        <view 
          v-for="(tab, index) in filterTabs" 
          :key="index" 
          class="tab-item" 
          :class="{ active: activeFilterIndex === index }"
          @tap="setActiveFilter(index)"
        >
          <text>{{ tab.name }}</text>
        </view>
      </view>
      
      <view class="sort-btn" @tap="toggleSortPopup">
        <text>{{ currentSort.name }}</text>
        <text class="sort-icon" :class="{ 'sort-open': showSortPopup }">▼</text>
      </view>
    </view>
    
    <!-- 排序选择弹窗 -->
    <view class="sort-popup" v-if="showSortPopup">
      <view 
        v-for="(sort, index) in sortOptions" 
        :key="index" 
        class="sort-item"
        :class="{ active: currentSortIndex === index }"
        @tap="selectSort(index)"
      >
        <text>{{ sort.name }}</text>
        <text class="check-icon" v-if="currentSortIndex === index">✓</text>
      </view>
    </view>
    
    <!-- 遮罩层 -->
    <view class="mask" v-if="showSortPopup" @tap="toggleSortPopup"></view>
    
    <!-- 推荐列表 -->
    <scroll-view class="recommended-list" scroll-y="true" @scrolltolower="loadMore">
      <view 
        v-for="(item, index) in recommendedList" 
        :key="index" 
        class="recommended-item"
        @tap="goToDetail(item.id)"
      >
        <view class="item-image">
          <text>{{ item.image }}</text>
          <view class="item-badge" v-if="item.isPromoted">推荐</view>
        </view>
        
        <view class="item-info">
          <view class="item-title">{{ item.name }}</view>
          
          <view class="item-tags">
            <text v-for="(tag, tagIndex) in item.tags" :key="tagIndex" class="tag">{{ tag }}</text>
          </view>
          
          <view class="item-rating">
            <text v-for="n in 5" :key="n" class="star" :class="{ active: n <= item.rating }">★</text>
            <text class="rating-value">{{ item.rating }}</text>
            <text class="review-count">({{ item.reviewCount }}条评价)</text>
          </view>
          
          <view class="item-address">{{ item.address }}</view>
          
          <view class="item-bottom">
            <text class="item-price">{{ item.price }}</text>
            <text class="item-distance" v-if="item.distance">{{ item.distance }}</text>
          </view>
        </view>
      </view>
      
      <!-- 加载状态 -->
      <view class="loading-section" v-if="isLoading">
        <text>加载中...</text>
      </view>
      
      <!-- 无更多数据 -->
      <view class="no-more-section" v-if="noMore && !isLoading">
        <text>没有更多数据了</text>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'

// 筛选选项
const filterTabs = ref([
  { name: '全部', value: 'all' },
  { name: '公办非营利性', value: 'public_non_profit' },
  { name: '民办非营利性', value: 'private_non_profit' },
  { name: '公办营利性', value: 'public_profit' },
  { name: '民办营利性', value: 'private_profit' }
])

// 排序选项
const sortOptions = ref([
  { name: '推荐排序', value: 'recommend' },
  { name: '评分最高', value: 'rating' },
  { name: '价格最低', value: 'price_low' },
  { name: '价格最高', value: 'price_high' },
  { name: '距离最近', value: 'distance' },
])

// 状态变量
const activeFilterIndex = ref(0)
const currentSortIndex = ref(0)
const currentSort = ref(sortOptions.value[0])
const showSortPopup = ref(false)
const recommendedList = ref([])
const isLoading = ref(false)
const page = ref(1)
const noMore = ref(false)

// 设置筛选条件
const setActiveFilter = (index) => {
  activeFilterIndex.value = index
  resetList()
  loadData()
}

// 切换排序弹窗
const toggleSortPopup = () => {
  showSortPopup.value = !showSortPopup.value
}

// 选择排序方式
const selectSort = (index) => {
  currentSortIndex.value = index
  currentSort.value = sortOptions.value[index]
  showSortPopup.value = false
  resetList()
  loadData()
}

// 重置列表
const resetList = () => {
  recommendedList.value = []
  page.value = 1
  noMore.value = false
}

// 加载更多
const loadMore = () => {
  if (!isLoading.value && !noMore.value) {
    page.value++
    loadData()
  }
}

// 加载数据
const loadData = () => {
  isLoading.value = true
  
  // 模拟请求 - 实际项目中应该调用API
  setTimeout(() => {
    // 模拟数据
    const newItems = Array.from({ length: 10 }, (_, i) => ({
      id: page.value * 10 + i,
      name: `推荐养老院${page.value * 10 + i}`,
      image: '养老院图片',
      tags: ['特级护理', '医疗资源', '环境优美'].slice(0, Math.floor(Math.random() * 3) + 1),
      rating: (Math.random() * 2 + 3).toFixed(1),
      reviewCount: Math.floor(Math.random() * 100) + 10,
      address: `海淀区西北旺路${Math.floor(Math.random() * 50) + 1}号院`,
      price: `${Math.floor(Math.random() * 1000) + 2500}/月起`,
      distance: `${(Math.random() * 5).toFixed(1)}km`,
      isPromoted: Math.random() > 0.7
    }))
    
    recommendedList.value = [...recommendedList.value, ...newItems]
    
    // 模拟数据加载完毕
    if (page.value >= 3) {
      noMore.value = true
    }
    
    isLoading.value = false
  }, 800)
}

// 查看详情
const goToDetail = (id) => {
  uni.navigateTo({
    url: `/pages/nursing-home-detail/index?id=${id}`
  })
}

// 页面加载时获取数据
onMounted(() => {
  loadData()
})
</script>

<style lang="scss">
page {
  background-color: #f5f5f5;
}

.more-recommended-page {
  min-height: 100vh;
  position: relative;
  
  .filter-section {
    background-color: #fff;
    padding: 12px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid rgba(195, 227, 227, 0.3);
    
    .filter-tabs {
      display: flex;
      align-items: center;
      flex: 1;
      overflow-x: auto;
      white-space: nowrap;
      
      &::-webkit-scrollbar {
        display: none;
      }
      
      .tab-item {
        padding: 6px 12px;
        margin-right: 10px;
        background-color: rgba(195, 227, 227, 0.1);
        border-radius: 15px;
        transition: all 0.3s;
        
        text {
          font-size: 13px;
          color: #2c7873;
        }
        
        &.active {
          background-color: rgba(195, 227, 227, 0.3);
          
          text {
            font-weight: 600;
          }
        }
      }
    }
    
    .sort-btn {
      display: flex;
      align-items: center;
      padding: 6px 12px;
      background-color: rgba(195, 227, 227, 0.1);
      border-radius: 15px;
      margin-left: 10px;
      
      text {
        font-size: 13px;
        color: #2c7873;
      }
      
      .sort-icon {
        font-size: 10px;
        margin-left: 3px;
        transition: transform 0.3s;
      }
      
      .sort-open {
        transform: rotate(180deg);
      }
    }
  }
  
  .sort-popup {
    position: absolute;
    top: 60px;
    right: 15px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 101;
    min-width: 120px;
    overflow: hidden;
    
    .sort-item {
      padding: 12px 15px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      text {
        font-size: 14px;
        color: #2c7873;
      }
      
      .check-icon {
        color: #c3e3e3;
        font-weight: bold;
      }
      
      &.active {
        background-color: rgba(195, 227, 227, 0.1);
        
        text {
          color: #2c7873;
          font-weight: 600;
        }
        
        .check-icon {
          color: #2c7873;
        }
      }
      
      &:active {
        background-color: rgba(195, 227, 227, 0.2);
      }
    }
  }
  
  .mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 100;
  }
  
  .recommended-list {
    padding: 15px;
    
    .recommended-item {
      background-color: #fff;
      border-radius: 12px;
      margin-bottom: 15px;
      overflow: hidden;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
      
      .item-image {
        height: 160px;
        background-color: rgba(195, 227, 227, 0.2);
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        
        text {
          color: #6FB3B8;
          font-size: 16px;
        }
        
        .item-badge {
          position: absolute;
          top: 10px;
          right: 10px;
          background-color: rgba(195, 227, 227, 0.8);
          color: #2c7873;
          padding: 4px 8px;
          border-radius: 4px;
          font-size: 12px;
          font-weight: 600;
        }
      }
      
      .item-info {
        padding: 12px 15px;
        
        .item-title {
          font-size: 16px;
          font-weight: bold;
          color: #2c7873;
          margin-bottom: 8px;
        }
        
        .item-tags {
          display: flex;
          flex-wrap: wrap;
          margin-bottom: 8px;
          
          .tag {
            font-size: 11px;
            color: #6FB3B8;
            background-color: rgba(195, 227, 227, 0.2);
            padding: 2px 8px;
            border-radius: 10px;
            margin-right: 8px;
            margin-bottom: 5px;
          }
        }
        
        .item-rating {
          display: flex;
          align-items: center;
          margin-bottom: 8px;
          
          .star {
            font-size: 14px;
            color: #ccc;
            margin-right: 2px;
            
            &.active {
              color: #FFB422;
            }
          }
          
          .rating-value {
            font-size: 14px;
            color: #FFB422;
            font-weight: 600;
            margin-left: 5px;
          }
          
          .review-count {
            font-size: 12px;
            color: #6FB3B8;
            margin-left: 5px;
          }
        }
        
        .item-address {
          font-size: 13px;
          color: #6FB3B8;
          margin-bottom: 8px;
        }
        
        .item-bottom {
          display: flex;
          justify-content: space-between;
          align-items: center;
          
          .item-price {
            font-size: 16px;
            color: #FF6B6B;
            font-weight: 600;
          }
          
          .item-distance {
            font-size: 13px;
            color: #6FB3B8;
            background-color: rgba(195, 227, 227, 0.2);
            padding: 2px 8px;
            border-radius: 10px;
          }
        }
      }
    }
  }
  
  .loading-section, .no-more-section {
    text-align: center;
    padding: 15px 0;
    
    text {
      font-size: 14px;
      color: #6FB3B8;
    }
  }
}
</style> 